<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  要求:
     1.  用户在表单中填写备忘录，单击添加按钮 备忘录展示在列表中
         1.1用户不能添加空的备忘录   做出提示
         1.2 添加完毕后 清空表单
     2.  当备忘录列表中没有数据时展示    <span>备忘录列表为空,请添加</span>  有数据隐藏
     3.  单击删除按钮时   删除对应的备忘录
     4.  单击清空备忘录时  要清空所有备忘录数据
     5.  添加， 删除，清空按钮被点击时     备忘录的总条数要随之改变
-->
<div id="app">
    <input type="text" placeholder="请输入备忘录" v-model="memo">
    <button @click="addMessage">添加备忘录</button>
    <h3>备忘录列表</h3>
    <span v-if="memos.length==0">备忘录列表为空,请添加</span>
    <ul>
        <li v-for="(message,index) in memos" :key="index">{{message}}
            <button @click="removeMemo(index)">删除</button>
        </li>
    </ul>
    <button @click="clear">清空备忘录</button>
    <span>备忘录共有{{memos.length}}条</span>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            memos: [
                '备忘录1', '备忘录2'
            ],
            memo: ""
        },
        methods: {
            addMessage() {
                if (this.memo.trim().length == 0) {
                    alert("请填写备忘录")
                    this.memo = ""
                    return
                }
                this.memos.push(this.memo)
                this.memo = ""
            },
            removeMemo(index) {
                //  如何实现根据索引删除指定位置的元素
                this.memos.splice(index, 1)
            },
            clear() {
                this.memos = []
            }
        }
    })
</script>
</body>
</html>